
import { _decorator, Enum, error, Node, tween, UITransform, v3, Vec3, Widget } from 'cc';
import { MonoBehavior } from './MonoBehavior';
import { easing } from 'cc';

const { ccclass, property } = _decorator;

/** 层级 */
enum EZIndex {
    // 底层
    GROUND = 0,
    // 默认面板
    NORMAL = 100,
    // 挂件
    WIDGET = 5000,
    // 一级弹窗
    WINDOW = 10000,
    // 二级弹窗
    DIALOG = 15000,
    // 引导层
    GUIDE = 20000,
    // 顶层提示
    TIP = 32766 - 1000,
    // 超顶层UI
    MAX = 32766 - 100
}

/** 视图类型 */
enum EViewType {
    // 全屏界面
    NORMAL = 0,
    // 弹窗
    DIALOG = 1,
    // 吐司提示
    TIP = 2
}

@ccclass('MonoUIPanel')
export class MonoUIPanel extends MonoBehavior {

    @property({
        type: Enum(EViewType), tooltip: `视图类型
        NORMAL: 全屏界面，无弹窗动画
        DIALOG: 弹窗，带动画
        TIP: 吐司提示`
    })
    viewType: EViewType = EViewType.NORMAL;

    @property({ type: Node, tooltip: '弹窗界面容器节点，用于播放弹出动画', visible(){return this.viewType !== EViewType.NORMAL;} })
    dialog: Node = null;
    @property({ type: Node, tooltip: '弹窗界面半透明遮罩节点', visible(){return this.viewType !== EViewType.NORMAL;} })
    mask: Node = null;

    @property({
        type: Enum(EZIndex), tooltip: `层级管理
        NORMAL: 默认面板
        WIDGET: 挂件
        WINDOW: 一级弹窗
        DIALOG: 二级弹窗
        GUIDE: 引导层
        TIP: 顶层提示
        MAX: 超顶层UI`
    })
    zIndex: EZIndex = EZIndex.NORMAL;

    @property({ tooltip: '父节点UI名称，默认添加到Canvas节点上' })
    parentUIName: string = '';

    // 界面打开的动画
    protected onEnterAnimation() {
        if (this.viewType === EViewType.NORMAL) {return;}

        if (!this.dialog) {
            throw 'dialog is null.';
        }

        this.dialog.scale = v3(0.01, 0.01, 0.01);
        tween(this.dialog)
            .to(0.2, {scale: v3(1.1, 1.1, 1)})
            .to(0.1, {scale: v3(1, 1, 1)})
            .start();
    }

    // 界面关闭的动画
    protected onExitAnimation() {
        if (this.viewType === EViewType.NORMAL) {return;}

        if (!this.dialog) {
            throw 'dialog is null.';
        }


        const tempScale = new Vec3();
        
        return new Promise<void>((resolve) => {
            tween(this.dialog)
                .call(() => { tempScale.set(1.08, 1.08, 1) })
                .to(0.1, { scale: tempScale }, { easing: easing.quadOut })
                .call(() => { tempScale.set(0.01, 0.01, 1) })
                .to(0.2, { scale: tempScale }, { easing: easing.quadIn })
                .call(() => {
                    // callback && callback();
                    resolve();
                })
                .start();
        });
    }

    protected onPrefabLoadedInit() {
        if (this.viewType !== EViewType.DIALOG) { return; }

        // 点击半透明区域关闭面板
        if (!this.mask) {this.mask = this.node.getChildByName('mask');}
        if (this.mask) {
            this.mask.on(Node.EventType.TOUCH_END, this.onCloseButton, this);
            this.mask.on(Node.EventType.TOUCH_CANCEL, this.onCloseButton, this);
        }
    }


    public onCloseButton() {
        gg.systemEvent.emit('CLOSE_UI', this.node);
    }
}


